html{
    height: 100%;
    background: radial-gradient(ellipse at bottom,#1b2735 0%,#090a0f 100%);
    overflow: hidden;
}
.title{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    color: #fff;
    text-align: center;
    font-family: 'lato',sans-serif;
    font-weight: 300;
    font-size: 50px;
    letter-spacing: 10px;
    margin-top: -60px;
    padding-left: 10px;
    background: linear-gradient(#fff,#38495a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}
@function getShadows($n){
    $shadows:'#{random(100)}vw #{random(100)}vh #fff';
    @for $i from 2 through $n{
        $shadows:'#{$shadows},#{random(100)}vw #{random(100)}vh #fff';
    }
    @return unquote($shadows)
};

$duration:400s;
$count:1000;
@for $i from 1 through 3{
    $duration:calc($duration/2);
    $count:calc($count/2);
    .layer#{$i}{
        $size:#{$i}px;
        position: fixed;
        width: $size;
        height: $size;
        border-radius: 50%;
        background-color: #fff;
        left: 0;
        top: 0;
        box-shadow: getShadows($count);
        animation: moveUp $duration linear infinite;
        &::after{
            content:'';
            position: fixed;
            left: 0;
            top: 100vh;
            width: $size;
            height: $size;
            border-radius: inherit;
            box-shadow: inherit;
        }
    }
}

@keyframes moveUp {
    100%{
        transform: translateY(-100vh);
    }
}